<template>
	<view class="my-userpage">
		<view class="userpage-header">
			<view class="user-box">
				<view class="photo-box">
					<image class="user-photo" :src="userInfo.avatarUrl"></image>
				</view>
				<text class="user-name">{{userInfo.nickName}}</text>
			</view>
		</view>
		<view class="userpage-body">
			<view class="body-top">
				<view class="user-like">
					<text>8</text>
					<text>收藏的店铺</text>
				</view>
				<view class="user-like">
					<text>14</text>
					<text>收藏的商品</text>
				</view>
				<view class="user-like">
					<text>18</text>
					<text>关注的商品</text>
				</view>
				<view class="user-like">
					<text>84</text>
					<text>足迹</text>
				</view>
			</view>
			<view class="body-center">
				<view class="order-title">
					我的订单
				</view>
				<view class="user-order">
					<view class="order-item">
						<image src="../../static/my-icons/icon1.png" class="order-img"></image>
						<text>待付款</text>
					</view>
					<view class="order-item">
						<image src="../../static/my-icons/icon2.png" class="order-img"></image>
						<text>待收货</text>
					</view>
					<view class="order-item">
						<image src="../../static/my-icons/icon3.png" class="order-img"></image>
						<text>退款/退货</text>
					</view>
					<view class="order-item">
						<image src="../../static/my-icons/icon3.png" class="order-img"></image>
						<text>全部订单</text>
					</view>
				</view>
			</view>
			<view class="body-bottom">
				<view class="other-option">
					<text>收货地址</text>
					<uni-icons type="right" size="17" />
				</view>
				<view class="other-option">
					<text>联系客服</text>
					<uni-icons type="right" size="17" />
				</view>
				<view class="other-option" @click="logout">
					<text>退出登录</text>
					<uni-icons type="right" size="17" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		name: "my-userpage",
		data() {
			return {

			};
		},
		computed: {
			...mapState('m_user', ['userInfo'])
		},
		methods: {
			...mapMutations('m_user',['getUserAdress','getUserDetails','getUserToken']),
			logout() {
				uni.showModal({
					content: '确定要退出登录吗',
					cancelText: '取消',
					confirmText: '确定',
					// 不能写出普通函数，因为this指向会改变
					success:(res)=>{
						if (res.confirm) {
							this.getUserAdress({}),
							this.getUserDetails({}),
							this.getUserToken('')
						} else if (res.cancel) {
							return
						}
					},
					fail(){
						return
					}
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f4f4f4;

		.my-userpage {
			.userpage-header {
				width: 100%;
				height: 380rpx;
				background-color: #c00000;
				display: flex;
				justify-content: center;
				align-items: center;

				.user-box {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.photo-box {
						padding: 5rpx;
						overflow: hidden;
						background-color: #fff;
						width: 200rpx;
						height: 200rpx;
						border-radius: 50%;

						.user-photo {
							display: block;
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}

					.user-name {
						padding-top: 30rpx;
						color: #fff;
						font-size: 30rpx;
						font-weight: bold;
					}
				}
			}

			.userpage-body {
				transform: translateY(-10px);
				margin: 0 auto;
				width: 95%;
				height: 650rpx;
				background-color: #f4f4f4;
				border-radius: 8rpx;
				overflow: hidden;

				.body-top {
					width: 100%;
					height: 120rpx;
					background-color: #fff;
					display: flex;
					border-radius: 8rpx;
					justify-content: space-around;

					.user-like {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						font-size: 30rpx;
					}
				}

				.body-center {
					margin: 20rpx 0;
					width: 100%;
					height: 245rpx;
					border-radius: 8rpx;
					background-color: #fff;

					.order-title {
						padding: 20rpx 10rpx;
						border-bottom: 1px solid #f4f4f4;
						box-sizing: border-box;
						font-size: 34rpx;
					}

					.user-order {
						display: flex;
						justify-content: space-around;

						.order-item {
							display: flex;
							height: 157rpx;
							flex-direction: column;
							justify-content: center;
							align-items: center;

							.order-img {
								display: block;
								width: 80rpx;
								height: 80rpx;
							}
						}
					}
				}

				.body-bottom {
					width: 100%;
					height: 246rpx;
					padding: 10rpx;
					box-sizing: border-box;
					border-radius: 8rpx;
					background-color: #fff;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.other-option {
						display: flex;
						justify-content: space-between;
						font-size: 34rpx;
					}
				}
			}
		}
	}
</style>
